<template>
	<view class="detail">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper"
			circular="true">
			<swiper-item v-for="item,index in detail.gallery" :key="index">
				<image :src="item.img_url" mode="" class="img"></image>
			</swiper-item>
		</swiper>
		<!-- 图文 -->
		<rich-text :nodes="detail.info.goods_desc"></rich-text>
		<!-- 商品导航    扩展组件-->
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" class="goods-nav"/>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				detail: {},
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					infoBackgroundColor: '#ff0000',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		// http://shop.bufantec.com/bufan/goods/detailaction?openId=13216484256&id=1009024 获取商品详情
		onLoad(options) {
			console.log(options);
			request({
				url: '/goods/detailaction',
				data: {
					openId: "13216484256",
					id: options.id
				}

			}).then(res => {
				console.log(res);
				this.detail = res
			})


		},
		// 监听购物车数量的变化
		watch:{
			"$store.state.cart":{
				handler(newVal){
					// console.log(newVal);
					// newVal.forEach(item=>{
					// 	this.options[2].info+=item.num
					// })
					
					this.options[2].info = newVal.lenght
				},
				deep:true,
				immediate:true
			}
		},
		methods: {
			onClick(e) {
				if(e.content.text == '购物车'){
					uni.switchTab({
						url:'../cart/cart'
					})
				}
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
			},
			buttonClick(e) {
				if(e.content.text == '加入购物车'){
					// 添加购物车的逻辑
					
					let obj = {
						img:this.detail.info.primary_pic_url,
						id:this.detail.info.id,
						name:this.detail.info.name,
						price:this.detail.info.retail_price
					}
					console.log(obj);
					
					
					this.$store.commit('addCart',obj)
					// 提示
					uni.showToast({
						title:"添加购物车成功"
					})
					
				
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 400rpx;

		.img {
			height: 100%;
			width: 100%;
		}
	}
	.goods-nav{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
